/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-12-17 09:57:58
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-12-19 15:46:07
 * @FilePath: \projecte:\学习\react\react-optimize-ts\src\views\board\index.tsx
 * @Description: 
 */
import React, { useState, useEffect } from 'react'
import styles from './board.module.scss'
import Item from './item'
export default function Board() {
    const [data, setData] = useState(Array(9).fill(null))
    const [desc, setDesc] = useState('')
    const onClickItem = (index: any) => {
        console.log('click11111', index)
        data[index] = 'X'
        setData([...data])
    }
    const testGetApi = async () => {
        const res = await fetch('http://localhost:3008/v1/test/json').then(res => res.json())
        console.log('data------', res)
        setDesc(res.message)
    }
    useEffect(() => {
        testGetApi()
    }, [])
    return (
        <div className={styles.container}>
            <div className={styles.board}>
                <div className={styles.parentNode}>
                    <Item onClick={onClickItem} index={0} value={data[0]} />
                    <Item onClick={onClickItem} index={1} value={data[1]} />
                    <Item onClick={onClickItem} index={2} value={data[2]} />
                    {/* <div className={styles.childNode}>1</div>
                    <div className={styles.childNode}>2</div>
                    <div className={styles.childNode}>3</div> */}
                </div>
                <div className={styles.parentNode}>
                    <div className={styles.childNode}>4</div>
                    <div className={styles.childNode}>5</div>
                    <div className={styles.childNode}>6</div>
                </div>
                <div className={styles.parentNode}>
                    <div className={styles.childNode}>7</div>
                    <div className={styles.childNode}>8</div>
                    <div className={styles.childNode}>9</div>
                </div>
            </div>
            <div className={styles.stepDescription}>
                步骤描述: {desc}
                <ul>
                    <li>XXXXX</li>
                </ul>
            </div>
        </div>
    )
}
